<template>
    <div class="about">
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">关于恒华出行宝</div>
            <div @click="goBack" slot="overwrite-left" class="common__header--img">
                <img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back">
            </div>
        </x-header>
        <div class="about_img">
            <img src="~assets/x3/henghua_banner.jpg" alt="about">
        </div>
        <div v-for="(item,index) in aboutLists" :key="index">
            <!-- 过渡动画 -->
            <transition name="transition-show" :key="index">
                <div v-if="index==0" v-show="showContent" class="slide">
                    <h3>广东恒华出行宝保险代理有限公司简介</h3>
                    <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp广东恒华出行宝保险代理有限公司系由中国保险监督委员会批准于2009年成立，专业为客户精准提供整合、全面保险产品和解决方 案的专业保险提供商。
                    </p>
                    <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp恒华出行宝深谙保险市场需求，以专业、综合性业务涵盖人寿保险、财产保险和健康保险等多个险种的代理服务，并与中保、平 安、太平洋、美亚等四十余家国内外保险公司结为战略业务合作伙伴。
                    </p>
                    <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp恒华出行宝以服务领先的客户导向，时刻关注客户需求，以领先的服务，寻找并满足客户需求，为客户提供快捷、精细、深度和专业的服务。
                    </p>
                    <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp恒华出行宝总部设于广州，于珠三角如中山等地开设多个分支机构，业务覆盖整个华南区域，并依靠稳健的发展、创新及优质的服务成为业务增长速度最快的保险代理中介机构和服务第一品牌。
                    </p>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
import { XHeader } from 'vux';
import { mapState, mapActions } from "vuex";
import axios from 'axios';
export default {
    components: { XHeader },
    computed: mapState({
        isWeChar: "isWeChar"
    }),
    data() {
        return {
            showContent: true,//是否显示详细
            aboutLists: [{
                title: '100',
                contents: ['利宝集团创立于1912年', '100多年来我们坚持以诚信正直行事']
            }, {
                title: '30',
                contents: ['业务覆盖30个国家或地区', '在世界各地设有800余家机构']
            }, {
                title: 'No.265',
                contents: ['', '《财富》杂志世界500强排名265位']
            }, {
                title: '50000',
                contents: ['', '全球员工人数超过50000人']
            }, {
                title: 'No.6',
                contents: ['', '全球第6大国际财险公司']
            }]
        }
    },
    methods: {
        goBack() {
            this.$common.goBack(this);
        }
    },
    mounted() {
        document.title = "关于利宝";
        this.$init.subPageInit(this);
    },
}
</script>

<style lang="scss">
.slide {
  padding: 20px 20px 30px 20px;
  color: #002663;
  background-color: white;
  max-height: 9999px;
  transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
  transition-delay: 0s;
  h3 {
    height: 60px;
    line-height: 50px;
    text-align: center;
  }
  p {
    height: auto;
    line-height: 30px;
  }
}

.about_img img {
  display: block;
  width: 100%;
}

.about_line {
  padding-top: 15px;
  height: 60px;
  line-height: 18px;
  color: #767676;
  background-color: white;
  font-size: 13px;
  border-bottom: 2px solid #dedede;
}

.about_line_left {
  float: left;
  width: 26%;
  height: 100%;
  text-align: right;
  div {
    float: right;
    width: 90%;
    height: 100%;
    line-height: 75px;
    font-size: 18px;
    text-align: right;
    border-bottom: 2px solid #acacac;
  }
}

.about_line_right {
  float: right;
  text-align: left;
  width: 65%;
  height: 100%;
  line-height: 25px;
  div {
    width: 100%;
    height: 26px;
  }
}

.about_line_img {
  float: right;
  width: 5%;
  height: 100%;
  line-height: 25px;
  img {
    margin: 15px auto;
    width: 15px;
    height: auto;
  }
}
</style>




